<template>
  <var-row :gutter="10">
    <var-app-bar
    style="border-radius: 15px;"
      :style="{ 
        background: 'linear-gradient(to top right, #A7D942, #192126 15%, #192126 85%, #A7D942',
        marginBottom: '30px' 
      }"
    >
      <template #left>
        <var-avatar src="https://fitzone.work/img/logo.png" size="mini" /> VIP
      </template>
      <template #content >
        <div>
          <h1 style="text-align: center;justify-content: center;align-items: center;">{{vipText}}</h1>
          <div style=" text-align: right;">
            <var-button color="#A7D942" style="margin-bottom: 10px; margin-right: 10px; border-radius: 20px;" v-if="userStore.permissions[0]==0" @click="joinVip(price,time)">Join Now</var-button>
            <var-button color="#A7D942" style="margin-bottom: 10px; margin-right: 10px; border-radius: 20px;" v-else @click="joinVip(price,time)">Renew</var-button>
          </div>
        </div>
      </template>
    </var-app-bar>
  </var-row>


  <var-row justify="center" :gutter="10">
      <var-col  v-for="vip in vipList" :key="vip" :class="vip.active" :span="8" @click="chooseVip(vip)" style="padding-left:0px; padding-right: 0px;">
        <var-row >
          <var-col class="timeCol" v-if="vip.time == 1">
            {{ vip.time + 'Month'}}
          </var-col>
          <var-col class="timeCol" v-else>
            {{ vip.time + 'Months'}}
          </var-col>
          <var-col class="disCol">
            {{ "\n\n\n" }}                          
          </var-col>
          <var-col class="priceCol">
            {{ '$'+vip.price }}
          </var-col>
        </var-row>
      </var-col>
  </var-row>
  <div class="text">
    VIP Benefits
  </div> 
  <var-row :gutter="10" style="text-align: center;justify-content: center;align-items: center;margin-top: 30px ;">
    <var-col v-for="item in iconList" :key="item" :span="6" class="iconBox">
      <var-col :span="24" direction="column">
        <var-icon :name=item.iName :size="34" />
        <span class="iconText">{{ item.text }}</span>
      </var-col>
    </var-col >
  </var-row>
</template>

<script>
import {reactive} from 'vue';
import MsgList from "@/components/MsgList/index.vue"
import axios from 'axios';
import { ref, onMounted} from 'vue'
import { StyleProvider, Themes } from '@varlet/ui'
import {ElContainer,ElHeader,ElMain,ElFooter} from 'element-plus' 
import { useUserStore } from '@/stores/user';
import { setToken, getToken } from '@/utils/auth'
import { Dialog, Snackbar } from '@varlet/ui'

const currentDate = ref(new Date())
var currentTheme = null
let facilityList = []
const floating = ref(false)
let loading = true
let userdata=[]
const userStore = useUserStore();
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth()+1;
const day = now.getDate();
const weekDay = now.getDay();
export default {
  data(){
    return{
      
      facilityList:[],
      dayList:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
      userStore:userStore,
      year:year,
      month:month,
      day:day,
      weekDay:weekDay,
      vipText:'Welcome to fitzone!',
      price:0,
      tmie:0,
      userdata:[],
      iconList:[
        {
          iName:'star',
          text:'logo'
        },
        {
          iName:'format-list-checkbox',
          text:'Plan'
        },
        {
          iName:'notebook',
          text:'Exclusive'
        },
        {
          iName:'magnify',
          text:'Analyse'
        },
        {
          iName:'information',
          text:'Coupons'
        },
        {
          iName:'cake-variant',
          text:'Gift'
        },
        {
          iName:'plus',
          text:'About'
        },
        {
          iName:'wrench',
          text:'Free'
        },
      ],
      vipList:[
        {
          price:1298,
          time:12,
          time:12,
          text:'One on one knowing',
          active:'row'
        },
        {
          price:548,
          time:3,
          time:3,
          text:'Exclusive fuel burning',
          active:'row'
        },
        {
          price:138,
          time:1,
          time:1,
          text:'Stable burning',
          active:'row'
        }
      ]
    }
  },
  created(){
  axios
  .get('https://fitzone.work:8080/all')
  .then(res =>{
    console.log(res.data);
    this.facilityList = res.data
    console.log(this.facilityList)
    this.loading = false;
    console.log(this.loading)
  })
  .catch(err =>{
    console.error(err);
  })
  },
  methods: {
    chooseVip(vip){
      if(vip.time == 1){
        this.vipText = '$'+vip.price+'/'+vip.time+' Month'
      }
      else{
        if(vip.time == 1){
        this.vipText = '$'+vip.price+'/'+vip.time+' Month'
      }
      else{
        this.vipText = '$'+vip.price+'/'+vip.time+' Months'
      }
      this.price = vip.price
      this.time =vip.time+' Months'
      }
      this.price = vip.price
      this.time =vip.time
      this.vipList.forEach((item)=>{
        item.active = 'row'
        if(vip.price == item.price){
          item.active = 'row-active'
        }
      })
      console.log(vip)
    },
    async joinVip(price,time){
      const actions = {
      confirm: () => {
      axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/subscribe',
        params:{
            money:price,
            id:userStore.userId,
            num:time,
        }
      }).then(res => {
        console.log(res.data)
        if(res.data==0){
          axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/recharge',
        params:{
            id:userStore.userId,
            money:0
        }
      }).then(res=>{
        useUserStore().permissions[1]=res.data
        userdata=getToken()
        userdata.balance=res.data
        setToken(userdata)
        resolve()
      })
          Snackbar.success('confirm')
        }else{
          Snackbar.error('You do not have enough balance!')
        }
      }).catch(err => {
        console.log(err)
      })    
    },
      cancel: () => Snackbar.error('User canceled'),
      close: () => Snackbar.error('User canceled'),
}
      actions[await Dialog({message:'Do you confirm the opening of VIP?',
                          title:'Tips',
                          confirmButtonText: 'Confirm',
                          cancelButtonText:'Cancel'})]()
      
    }
  },
  
}
</script>
<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.var-col {   
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  text-align: center;
  background-clip: content-box !important;
}
.row-active{
  background: rgba(245, 255, 253, 0.05);
  border-radius: 20px;
  height:auto;
  border: 1px solid #A7D942;
}
.row{
  background: rgba(245, 255, 253, 0.05);
  border-radius: 20px;
  height:auto;
}
.timeCol{
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
}
.priceCol{
  font-family: 'SF Pro Display';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  color: #A7D942;
}
.disCol{
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 10px;
text-align: center;

color: #FFFFFF;
}
.text{
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 48px;
  text-transform: capitalize;
  color: #FFFFFF;
}
.iconText{
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 36px;
  text-align: center;
  text-transform: capitalize;

}
.iconBox{
  padding-top:20xp;
  margin-bottom: 20px;
}
</style>